.header{
  padding-top:200rpx;
}
.tile{
  font-size: 60rpx;
}
.free-style-list{
	background-image: url('https://z3.ax1x.com/2021/05/14/grhfMV.png');
	background-size: cover;
	background-position: center;
	position: relative;
	z-index: 1;
}
.flex-direction {
	flex-direction: column;
}
.page-card-box {
  position: relative;
  margin: 180rpx 30rpx 60rpx;
  .page-card-view {
      position: relative;
      padding: 20rpx 30rpx;
      border-radius: 24rpx;
      display: flex;
      z-index: 2;
      .left-view {
          position: relative;
          height: 202rpx;
          padding: 20rpx 0;
          flex: 1;
      }
      .right-view {
          position: relative;
          height: 202rpx;
          width: 180rpx;
          text-align: center;
          margin-left: 90rpx;
          image {
              position: absolute;
              width: 260rpx;
              height: 260rpx;
              top: -85rpx;
              left: -40rpx;
              filter: drop-shadow(var(--ui-Shadow-lg));
              -webkit-filter: drop-shadow(var(--ui-Shadow-lg));
          }
          .text {
              position: absolute;
              bottom: 8rpx;
              width: 100%;
          }
          &:before {
              position: absolute;
              content: "";
              height: 190rpx;
              width: 2rpx;
              left: -40rpx;
              top: 33rpx;
              background-image: linear-gradient(0deg, #ffffffbf, #0166eb00);
          }
      }
  }
  .page-card-sub {
      position: relative;
      margin: 0 40rpx;
      padding: 18rpx 30rpx;
      border-radius: 0 0 30rpx 30rpx;
      z-index: 1;
      text {
          z-index: 3;
      }
  }
}

.ui-container {
  position: relative;
  padding-left: 20rpx;
  padding-right: 20rpx;
  .test-doc-card {
      position: relative;
      border-radius: 24rpx;
      padding: 30rpx;
      height: 300rpx;
      .content {
          position: relative;
          height: 100%;
          z-index: 2;
          .name {
              position: absolute;
              bottom: 0;
          }
      }
      .bg-icon {
          position: absolute;
          width: 150rpx;
          height: 150rpx;
          z-index: 1;
          bottom: 10rpx;
          right: 10rpx;
          image {
              width: 100%;
              height: 100%;
              z-index: 0;
              opacity: 9;
          }
      }
  }
}
  
  .main {
    display: flex;
    flex-wrap: wrap;
    width: 690rpx;
    margin: 0 auto;
    flex-direction: row;
    justify-content: space-between;
  }
